{% extends 'a_header.html' %}
{% load static %}
{% block title %}
    帖子广场
{% endblock %}
{% block linkFiles %}
    <link rel="stylesheet" href="{% static 'css/articles.css' %}">
{% endblock %}
{% block UserInfo %}
    <a href="{% url 'account:index' %}?u_id={{ request.user.id }}" class="navbar-item">
        <img src="data:;base64,{{ imgUserData }}" alt="" id="UserImg">
    </a>
{% endblock %}
{% block mainContent %}
<div class="section">
  <div class="container">
    <div class="tile">
      <div class="tile is-vertical is-parent is-8">
{#        <div class="box">#}
{#          <div class="media">#}
{#            <div class="media-left">#}
{#              <figure class="image is-64x64">#}
{#                <img src="https://bulma.io/images/placeholders/128x128.png" alt="">#}
{#              </figure>#}
{#            </div>#}
{#            <div class="media-content lh-20">#}
{#              <p><strong>协程</strong> <span class="tag is-lightblue">栏目</span></p>#}
{#              <p>#}
{#                380关注 | 68 问题 | 69精华内容#}
{#                <button class="button is-info is-pulled-right">关注栏目</button>#}
{#              </p>#}
{#            </div>#}
{#          </div>#}
{#        </div>#}

      <nav aria-label="Page navigation" style="display: flex;justify-content: center;align-items: center;">
      <ul class="pagination" style="width: min-content;height: 45px;">
        <li style="width:45px;font-size: 18px;height:40px;border-width:1px;border-color: #3c3c3c;border-style: solid">
          <a href="#" aria-label="Previous" style="line-height: 35px;">
            <span aria-hidden="true">&laquo;</span>
          </a>
        </li>
        <li style="width:45px;font-size: 18px;height:40px;border-width:1px;border-color: #3c3c3c;border-style: solid"><a href="?page=1" style="line-height: 35px;">1</a></li>
        <li style="width:45px;font-size: 18px;height:40px;border-width:1px;border-color: #3c3c3c;border-style: solid"><a href="?page=2" style="line-height: 35px;">2</a></li>
        <li style="width:45px;font-size: 18px;height:40px;border-width:1px;border-color: #3c3c3c;border-style: solid"><a href="?page=3" style="line-height: 35px;">3</a></li>
        <li style="width:45px;font-size: 18px;height:40px;border-width:1px;border-color: #3c3c3c;border-style: solid"><a href="?page=4" style="line-height: 35px;">4</a></li>
        <li style="width:45px;font-size: 18px;height:40px;border-width:1px;border-color: #3c3c3c;border-style: solid"><a href="?page=5" style="line-height: 35px;">5</a></li>
        <li style="width:45px;font-size: 18px;height:40px;border-width:1px;border-color: #3c3c3c;border-style: solid">
          <a href="#" aria-label="Next" style="line-height: 35px;">
            <span aria-hidden="true">&raquo;</span>
          </a>
        </li>
      </ul>
    </nav>
      </div>
      {% block rightBlock %}
         <div class="tile is-vertical is-parent">
            <div class="card">
              <div class="card-header">
                <p class="card-header-title">陶陶涵热搜</p>
              </div>
              <div class="card-content">
                <ul class="lh-20">
                  <li><a href="#">演员的诞生第十期</a><i class="fa fa-fire"></i></li>
                  <li><a href="#">北航陈小武</a><i class="fa fa-fire"></i></li>
                  <li><a href="#">微信跳一跳</a><i class="fa fa-fire"></i></li>
                  <li><a href="#">解忧杂货店</a></li>
                  <li><a href="#">前任3</a></li>
                  <li><a href="#">妖猫传</a></li>
                  <li><a href="#">琅琊榜2</a></li>
                  <li><a href="#">刘昊然</a></li>
                  <li><a href="#">黄轩</a></li>
                  <li><a href="#">比特币</a></li>
                </ul>
              </div>
            </div>
      </div>
      {% endblock %}

    </div>

  </div>
</div>
{% endblock %}

{% block jsFiles %}
    <script src="{% static 'js/article/article_square_manage.js' %}"></script>
    <script type="text/javascript">
        $(document).ready(function (){
            getData({{ request.GET.page }});
        })
    </script>


{% endblock %}